<template>
				<view class="uni-margin-wrap">
					<!-- 轮播图 -->
				
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item v-for="(item,i) in oneimg" :key="item.id">
						<view class="swiper-item1">
							<image :src="'http://124.220.177.66:8082'+item.rotationURL"></image>
						</view>
					</swiper-item>
					
				</swiper>
				
				
				<!-- 店铺小盒子 介绍 -->
				
				<view class="fristbox">
					<view  v-for="(item,i) in presentation" :key="item.id" class="pur">
						<image :src="'http://124.220.177.66:8082'+item.rotationURL"></image>
						<view class="nameintro">
							<text class="call" style="font-weight: 600;">{{item.storeName}}</text><br>
							<text class="call2">{{item.storeAddress}}</text>
						</view>
						<view class="iconfon">
							<text class="iconfont icon-chuzu" @click="getLocation"></text>
							<text class="iconfont icon-daohang" @click="getLocation"></text>
							<text class="iconfont icon-24gf-telephone2" @click="tele"></text>
						</view>
					</view>
				</view>
							
				
				<!-- 剧本 组局 排行榜 门店 -->
				
				<view class="four">
					<!-- 剧本 -->
					<view>
						<navigator url = "/pages/script/script" open-type="switchTab"><text class="one iconfont icon-wenjian"></text></navigator>
						<h4 style="text-align: center;margin-left: 0rpx;margin-top: 10rpx;color: white;font-weight: 200;font-size: 27rpx;">剧本</h4>
					</view>
					<!-- 组局 -->
					<view>
						<navigator url = "/pages/GroupBureau/GroupBureau" open-type="switchTab"><text class="two iconfont icon-jiaosequanju"></text></navigator>
					<h4 style="text-align: center;margin-left: 0rpx;margin-top: 10rpx;color: white;font-weight: 200;font-size: 27rpx;">组局</h4>          
					</view>
					<!-- 个人信息 -->
					<view>
						<navigator url = "/pages/mine/mine" open-type="switchTab"><text class="three iconfont icon-huangguan1"></text></navigator>
					<h4 style="text-align: center;margin-left: 0rpx;margin-top: 10rpx;color: white;font-weight: 200;font-size: 27rpx;">我的</h4>  
					</view>
					<!-- 门店 -->
					<view @click="showma">
						<text class="four2 iconfont icon-dianpu"></text>
						<h4 style="text-align: center;margin-left: 0rpx;margin-top: 10rpx;color: white;font-weight: 200;font-size: 27rpx;">门店微信</h4>  </view>
				</view>
				<uni-popup ref="popup" type="bottom" background-color="#0D141F">底部弹出 Popup</uni-popup>
			</view>
			
			<!-- 推荐剧本 -->
			<view class="nicebook">
				<view class="tit">
					<h2 class="book">推荐剧本</h2>
					<navigator url = "/pages/script/script" open-type="switchTab"><view class="more">更多>></view></navigator>
				</view>
				
				
				<!-- 剧本向右滑动 -->
				<view class="scrollimg">
					<scroll-view class="imgbox" scroll-x="true" @scroll="scroll" scroll-left="120" autoplay="true">					
									<view  v-for="item in scriptData" :key="item.id" @click="pageto(item.id)">
										<image :src="'http://124.220.177.66:8082'+item.scriptUrl"></image>
										<text class="point">{{item.scriptPrice}}</text>
										<text class="bookname">{{item.scriptName}}</text>
									</view>
									
								</scroll-view>
							</view>
							
							<!-- 更多剧本 -->
							<view>
								<navigator url="/pages/script/script" open-type="switchTab">
									<view class="morebook">
										<text class="iconfont icon-tushu"></text>
										<h5 class="total">查看本店98个剧本>>>></h5>
									</view>
									</navigator>
							</view>
				</view>
				
				
				<!-- 最近组局 -->
				<navigator url = "/pages/GroupBureau/GroupBureau" open-type="switchTab">
				<view class="car">
					<view class="newcar">
						<view class="stong">最近组局（共7场）</view>
						<text>12:30开场 欢乐 还差5人，快来！</text>
					</view>
					<!-- <image src="../../static/images/art.jpg"></image> -->
				</view>
				</navigator>

			<!-- 优秀主持人 -->
			<view class="dmbox">
			<h3 class="dm">优秀主持人</h3>

			<scroll-view class="dmlist" scroll-x="true" @scroll="scroll" scroll-left="120">
									<view  v-for="(item,i) in dmbox" :key="item.id">
										<image :src="'http://124.220.177.66:8082'+item.hostHeader"></image>
										<text>{{item.hostNickName}}</text>
									</view>
									
								</scroll-view>				
						</view>
						
						
		<!-- 场地 -->
		
		<view class="dmbox">
						<h3 class="dm">房间展示</h3>
		
						<scroll-view class="dmlist" scroll-x="true" @scroll="scroll" scroll-left="120">
							<view v-for="(item,i) in housbox" :key="item.id" >
								<image :src="'http://124.220.177.66:8082'+item.roomImg"></image>
								<text>{{item.roomName}}</text>
								
								
							</view>
							
						</scroll-view>				
					</view>
			
</template>

<script>
export default {
	data() {
		return {
			scriptData:[],
			oneimg:[],
			presentation:[],
			dmbox:[],
			housbox:[],
			// 轮播图
			 background: ['color1', 'color2', 'color3'],
			            indicatorDots: true,
			            autoplay: true,
			            interval: 3000,
			            duration: 500
		}
				
	},
	onLoad() {

	
	},
	methods: {
	// 小图标地图
	getLocation:function(){
	    wx.getLocation({
	      type: 'wgs84', 
	      success: function (res) {
	        wx.openLocation({//​使用微信内置地图查看位置。
	          latitude: 30.755969,//要去的纬度-地址
	          longitude: 103.988306,//要去的经度-地址
	          name: "猫腻沉浸式剧本杀",
	          address: '四川省成都市郫都区犀浦街道犀安路266号附2145号'
	        })
	      }
	    })
	  },
	//门店图标二维码
	showma(){
		this.$refs.popup.open('center')
	},
	//剧本跳转
	pageto(itemid){
		console.log('index',itemid);	
		uni.navigateTo({
			url:'/pages/script/scriptDetails/scriptDetails?id='+itemid
		})
	},
	
	  
	// 电话号码
	tele:function(){
		  uni.showActionSheet({
		  	itemList: ['15882369297', '13258142476'],
			itemColor:"#0D141F",
		  	success: function (res) {
		  		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
		  	},
		  	fail: function (res) {
		  		console.log(res.errMsg);
		  	}
		  })
	  },
	// 轮播图渲染
	showimg:function(){
		uni.request({
			url:'http://124.220.177.66:8082/juben/getRotation',
			success:(res)=>{
				console.log('轮播图',res.data.data);				
				this.oneimg = res.data.data	
			}
		})
	},
	// 店铺介绍方块
	getpresentation:function(){
		uni.request({
			url:'http://124.220.177.66:8082/juben/getStore',
			success: (res) => {
				console.log('店铺介绍',res.data.data);
				this.presentation = res.data.data
			}
		})
	},
	// 推荐剧本渲染
	testAPI(){
		uni.request({
			url:'http://124.220.177.66:8082/juben/getRecommendationScript',
			success:(res)=>{
				console.log('获取推荐剧本',res.data.data);
				
				this.scriptData = res.data.data
				// console.log('数据渲染',this.scriptData);
			}
		})
	},
	
	//组局
	// creat(){
	// 	uni.request({
	// 		url:'http://localhost:8082/juben/getAllGroup',
	// 		success:(res)=>{
	// 			console.log('组局',res.data.data);

	// 		}
	// 	})
	// },
	
	
	
	// 主持人头像渲染
	getdmbox(){
		uni.request({
			url:'http://124.220.177.66:8082/juben/getHost',
			success: (res) => {
				console.log('dm的',res.data.data);
				this.dmbox = res.data.data
			}
		})
	},
	// 主题房
	gethouse(){
		uni.request({
			url:'http://124.220.177.66:8082/juben/getStoreRoom',
			success: (res) => {
				console.log('房间',res.data.data);
				this.housbox = res.data.data
			}
		})
	}
	
	},


	created(){
		this.testAPI(),
		this.showimg(),
		this.getpresentation(),
		this.getdmbox(),
		this.gethouse()
		},
		
		
}
</script>

<style lang="scss">
	@import url('~@/static/iconfont/iconfont.css');
	/* 背景颜色 */
		page{
			background-color: #0D141F;
			}
	// 轮播图样式
		swiper{
			width: 750rpx;
			height: 450rpx;
			
		}
		swiper-item{
			width: 750rpx;
			height: 550rpx;
			image{
				width: 100%;
				height: 550rpx;
			}
		}
	//介绍方块
	.fristbox{
		   width: 680rpx;
		   height: 115rpx;
		   margin-top: -20rpx;
		   margin-left: 36rpx;
		   position: relative;
		   z-index: 9999;
		   background-image: linear-gradient(to right, #875BA3 , #BB83B7);
		   border-radius: 10rpx;			   	
	 }
	 .fristbox image{	
		 			   width:95rpx;
		 			   height: 90rpx;
					   margin: 10rpx;
					   margin-left: 20rpx;
					   border-radius: 10rpx;
					   float: left;
					   position: relative;
	 }
	 // .pur{
		//  clear: both;
		//  height: 80rpx;
	 // }
	.nameintro{
		float: left;
		margin-left: 20rpx;
		margin-top: 10rpx;
		.call{
			font-size: 30rpx;
			color: lemonchiffon;
		}
		.call2{
			font-size: 20rpx;
			color: black;
		}
	}
	// 小图标
	.iconfon{
		float: right;
		position: absolute;
		bottom: 30rpx;
		right: 5rpx;
		text{
			font-size: 40rpx;
			color: floralwhite;
			width: 100rpx;
			height: 100rpx;
			margin: 10rpx;
			border-radius: 5rpx;
			background-color: #21252B;
		}
	}
	
	// 剧本组局门店管理
	.four{
		width: 700rpx;
		height: 130rpx;
		text-align: center;
		margin: auto;
		margin-top: 30rpx;
		// border: #875BA3 1rpx solid;
		view{
			width: 150rpx;
			height: 100rpx;
			float: left;
			margin-left: 19rpx;
		}
		text{
			font-size: 75rpx;
			margin: 40rpx;
			padding-top: 20rpx;
		}
		
		.one{
			color: #875BA3;
		}
		.two{
			color: #FB50D1;
		}
		.three{
			color: #FE6551;
		}
		.four2{
			color:#F7953D ;
		}
		
	}
	
	// 推荐剧本
	.nicebook{
		width: 700rpx;
		height: 520rpx;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 30rpx;
		overflow: hidden;
		background-color: #232433;
		.tit{
			width: 700rpx;
			height: 80rpx;
			margin: 10rpx;
			position: relative;
			
			.book{
				color: white;
				font-weight: 400rpx;
				font-size: 35rpx;
				margin: 20rpx;
				position: absolute;
			}
			.more{
				color: gray;
				font-size: 30rpx;
				position: absolute;
				right: 60rpx;
				top:20rpx
				
			}	
				}

		
		.imgbox{
			width: 750rpx;
			height: 340rpx;
			margin: auto;
			display: flex;
			justify-content:space-between;
			white-space:nowrap;		
			view{
				width: 118px;
				height: 310rpx;
				display: inline-block;
				position: relative;
				margin-left: 20rpx;
				// border: #875BA3 1px solid;
				image{
					width: 210rpx;
					height: 250rpx;
					border-radius: 10rpx;
				}
				.bookname{
					color: white;
					font-size: 25rpx;
					font-weight: 200;
					position: absolute;
					right: 60rpx;
					bottom: 0rpx;
				}
				.point{
					color: #875BA3;
					font-size: 18rpx;
					font-weight: 200;
					position: absolute;
					right: 20rpx;
					bottom: 30rpx;
				}
			}
		
	}
		.morebook{
			width: 650rpx;
			height: 65rpx;
			margin: auto;
			background-color: #0D141F;
			border-radius: 10rpx;
			text-align: center;
			
			text{
				display: inline-block;
				line-height: 65rpx;
				color: #FFDB23;
			}
			.total{
				display: inline-block;
				line-height: 65rpx;
				color: white;
				font-weight: 200;
				font-size: 28rpx;
				margin-left: 10rpx;
			}
		}
		
		}
		// 最近组局
		.car{
			width: 700rpx;
			height: 160rpx;
			margin: auto;
			margin-top: 20rpx;
			border-radius: 15rpx;
			position: relative;
			background-image: linear-gradient(to right, #875BA3 , #BB83B7);
			
			.newcar{
				width: 400rpx;
				margin:20rpx;
				color: white;
				position: absolute;
				top:10rpx;
				
			.stong{
					font-weight: 800;
				}
				text{
					font-weight: 200;
					font-size: 25rpx;
				}
			}
			
			image{
				width: 100rpx;
				height: 130rpx;
				border-radius: 10rpx;
				position: absolute;
				right: 50rpx;
				top:20rpx
				
				
			}
	}
	
	// 优秀主持人
	.dmbox{
		width: 700rpx;
		height: 370rpx;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 30rpx;
		overflow: hidden;
		background-color: #232433;
		// display: flex;
		// white-space:nowrap;	
			.dm{
				color: white;
				margin: 20rpx;
				font-weight: 800rpx;
			}
			
			
			.dmlist{
				width: 700rpx;
				height: 280rpx;
				white-space:nowrap;	
				
				view{
					width:200rpx;
					height: 260rpx;
					margin: 20rpx;
					position: relative;
					display: inline-block;
					
					image{
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
					
					text{
						color: white;
						text-align: center;
						position: absolute;
						bottom: 5rpx;
						left: 50rpx;
					}
				}
				
				
			}
			
	}
	
</style>
